<template>
  <el-row id="login">
    <el-col hidden-md-and-down :md="13">
      <el-carousel trigger="click" height="150px">
        <el-carousel-item v-for="(item, index) in imgs" :key="index">
          <div class="zoomImage-100" :style="{backgroundImage: 'url(' + item.src + ')'}"></div>
        </el-carousel-item>
      </el-carousel>
    </el-col>
    <el-col :xs="24" :sm="24" :md="11" style="position: relative;">
      <vue-particles color="#dedede" shape-type="edge" class="particles-js"></vue-particles>
      <div >
         <h1 class="back-home wow fadeInRight" data-wow-duration="2s" data-wow-offset="100" @click="gotoHome()">测试</h1>
         <div class="login-rigth wow fadeInUp"data-wow-duration="2s" data-wow-offset="100">
           <p>登录</p>
           <h3>Loign with your account</h3>
           <div class="icon-input">
             <img src="static/username.png" alt="">
             <input type="text"  placeholder="User name" v-model="user.username"/>

           </div>
           <div class="icon-input">
             <img src="static/password.png" alt="">
             <input type="password" placeholder="Password" v-model="user.password"/>

           </div>
           <div class="remeber">
             <el-checkbox v-model="checked">记住我</el-checkbox>
           </div>

           <button class="btn btn-default" type="button" name="button" @click="login()">登录</button>

           <span @click="register()">
             如果你还没有账号，点击注册
           </span>
         </div>
       </div>
    </el-col>

    <div class="" style="position: fixed;bottom: 300px;right: 200px;">
      <fancy-menu></fancy-menu>
    </div>
  </el-row>
</template>

<script>
import axios from 'axios'
import Cookies from 'js-cookie'

export default {
  name: "login",
  title: "登录",
  data () {
    return {
      user: {
        username: '',
        password: ''
      },
      checked: false,
      imgs: [
        {src: 'static/login1.jpg'},
        {src: 'static/login2.jpg'},
        {src: 'static/login3.jpg'},
        {src: 'static/login4.jpg'},
      ]
    }
  },
  mounted () {
    // new WOW().init()
  },
  methods: {
    login () {
      axios.post('login', this.$paramsConvert(this.user)).then(res => {
        if (res.data.status) {
          this.$store.dispatch('setUser', res.data.data)
          this.$router.push({name: 'home_index'})
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$catchError(error)
      })
    },
    register () {
      this.$router.push({name: 'regist'})
    }
  }
}
</script>
<style lang="scss">
  @import './login.scss'
</style>
